<template>
  <div class="container">
    <div class="breadcrumb">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">Home</el-breadcrumb-item>
        <el-breadcrumb-item>FAQ</el-breadcrumb-item>
        <el-breadcrumb-item>{{ question }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <div class="content">
      <div class="left">
        <div class="title">How to Install XAPK/APK Files on Android</div>
        
        <div class="section">
          <h2>What Are APK and XAPK Files?</h2>
          <div class="info-box">
            <p><strong>APK (Android Package Kit)</strong>: The standard file format for Android apps. It contains all the necessary files for an app to be installed on an Android device.</p>
            <p><strong>XAPK</strong>: An extended APK format that includes additional data files (like OBB files) required for larger apps or games.</p>
          </div>
        </div>
    
        <div class="section">
          <h2>Installation Steps</h2>
          
          <div class="installation-steps">
            <h3>For Android 8 Oreo and Newer</h3>
            <ol>
              <li>Open your device's <strong>Settings</strong> app</li>
              <!-- <img src="https://example.com/settings-icon.png" alt="Settings Icon" class="icon" /> -->
              <li>Navigate to <strong>Apps & Notifications</strong></li>
              <!-- <img src="https://example.com/apps-notifications.png" alt="Apps & Notifications" class="icon" /> -->
              <li>Tap on <strong>Advanced</strong></li>
              <li>Select <strong>Special app access</strong></li>
              <li>Find and tap on <strong>Install unknown apps</strong></li>
              <li>Choose your browser (e.g., Chrome)</li>
              <li>Enable <strong>Allow from this source</strong></li>
              <li>Download and install APK files from our website</li>
            </ol>
          </div>
    
          <div class="installation-steps">
            <h3>For Android 7 Nougat and Earlier</h3>
            <ol>
              <li>Open your device's <strong>Settings</strong> app</li>
              <li>Go to <strong>Security</strong></li>
              <li>Enable <strong>Unknown sources</strong> under Device Administration</li>
              <li>Download and install APK files from our website</li>
            </ol>
          </div>
        </div>
    
        <div class="section">
          <h2>Why Use APK Files?</h2>
          <div class="info-box">
            <ul>
              <li>Access to new features before official release</li>
              <li>Install apps that are region-locked</li>
              <li>Install apps when Google Play Store is not available</li>
              <li>Access to older versions of apps</li>
            </ul>
          </div>
        </div>
      </div>
      <TopDownloads />
    </div>
  </div>
</template>

<script setup>
import TopDownloads from '@/components/TopDownloads.vue'
const route = useRoute()
const question = route.query.question
</script>

<style scoped lang="scss">
.container {
  /* max-width: 800px;
  margin: 0 auto;
  padding: 20px; */
  .content {
    display: flex;
    gap: 5rem;
    margin-top: 2rem;
    .title {
      @include title;
    }
    @media screen and (max-width: 768px) {
      flex-direction: column;
      gap: 0;
    }
  }
}

h1 {
  /* text-align: center; */
  margin-bottom: 30px;
  color: #2c3e50;
}

.section {
  margin-bottom: 30px;
}

h2 {
  color: #2c3e50;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

h3 {
  color: #34495e;
  margin: 20px 0 15px;
}

.info-box {
  background-color: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin: 15px 0;
}

.installation-steps {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  margin: 20px 0;
}

ol {
  padding-left: 20px;
}

li {
  margin: 10px 0;
  line-height: 1.6;
}

ul {
  padding-left: 20px;
  list-style-type: disc;
}

strong {
  color: #2c3e50;
}

.icon {
  width: 50px;
  height: auto;
  margin: 10px 0;
}
</style>
